/*
 * @Description: 单个气泡框管理
 * @Author: your name
 * @version: 
 * @Date: 2024-07-16 09:46:17
 * @LastEditors: your name
 * @LastEditTime: 2024-07-17 09:09:49
 * @usage const popupHandler=new Popup(viewer)
 * @添加气泡框 popupHandler.addPopup(htmlContent,position,options)
 * @options {offset:Cesium.Cartesian2}
 * @删除气泡框 popupHandler.removePopup()
 */
import * as Cesium from 'cesium'

class Popup {
    constructor(viewer){
        // 为了代码提示，先用Cesium.Viewer
        this.viewer=viewer
        this.scene=this.viewer.scene
        this.popup=null
    }

    /**
    * 添加气泡框
    * @param {Sting} containerID 气泡框容器
    * @param {String} htmlContent : html dom 元素
    * @param {Cesium.Cartesian3} position : 笛卡尔3维坐标
    * @param {Object} options : 气泡框配置选项
    */
    addPopup(containerID,htmlContent,position,options={}){
        // 创建一个气泡框的容器，并将其添加到cesium的widgets中
        const target=document.getElementById(containerID)
        if(target){
            // 如果当前dom中已经存在了这个container，直接返回
            console.warn('该ID已存在，请使用其他ID')
            return 
        }

        const container=document.createElement('div')
        container.id=containerID
        this.viewer.cesiumWidget.container.appendChild(container)
        // 将html dom 元素赋值给气泡框
        container.innerHTML=htmlContent
        container.className='popup'
        container.style.position='absolute'
        this.popup={
            container,
            position
        }
        // 通过坐标，渲染气泡框的位置
        this.renderPostion(position,container,options)
    }

    renderPostion(position,container,options){
        // 监听相机的事件，更新气泡框的位置
        // 设置监听的频率
        this.viewer.camera.percentageChanged=0.01
        this.viewer.camera.changed.addEventListener(()=>this.updatePopup(position,container,options),this)
    }

    // 更新单个气泡框
    updatePopup(position,container,options){
        const {offset}=options
        let offsetReal=[0,0]
        // 如果用户向自定义偏移值，做适配
        if(Cesium.defined(offset) && Cesium.defined(options)){
            offsetReal=offset
        }
        const canvasHeight=this.viewer.scene.canvas.height
        const positionCar2=Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.scene, position);
        // 设置气泡框的bottom，并向上位移
        container.style.bottom=canvasHeight-positionCar2.y+offsetReal[0]+'px'
        // 将气泡框在水平方向上，向左位移它自身的1/2
        const offsetWidth=container.offsetWidth
        container.style.left=positionCar2.x-offsetWidth/2+offsetReal[1]+'px'
        // 1.性能优化，只渲染屏幕范围内的气泡框
        // 2.给气泡框设置一个最小显示高度
        // 3.给气泡框添加近大远小
    }

    removePopup(){
        const {container}=this.popup
        if(container){
            this.viewer.cesiumWidget.container.removeChild(container)
            // 清除popup的监听事件
            this.viewer.scene.postRender.removeEventListener(this.updatePopup,this)
            this.popup=null
        }
    }
}

export default Popup